import TableUtils from '@/components/tables/cfg/table-utils.js'
import { TableColTypes } from '@/base/pojo/TableColType'
import { TableDataTypes, TableDataType } from '@/base/pojo/TableDataType'


// 空内容
export const emptyText = ''

// table slots
/**
 * 输入框插槽
 * @param {Object} param 参数配置
 * @returns {String|Object} 字符串或输入框
 */
export const edit_input = ({ row, column }) => {
  // 如果是 field ，并且存在子级，那么不可编辑
  if (['field'].includes(column.field) && TableUtils.isExistChildren(row)) return row[column.field];
  else return [<el-input size='default' placeholder="请输入" v-model={row[column.field]} />];
}
/**
 * 超链接输入插槽
 * @param {Object} param 参数配置
 * @returns {String|Object} 字符串或输入框
 */
export const edit_input_link = ({row, column}) => {
  if (TableUtils.isExistChildren(row)) return row[column.field];
  else return [<el-input placeholder='http://www.xxx.com?id=#{id}&name=#{name}' size='default' v-model={row[column.field]} />];
}
/**
 * 数字输入插槽
 * @param {Object} param 参数配置
 * @returns {String|Object} 字符串或输入框
 */
export const edit_input_number = ({ row, column }) => {
  // 如果是 width ，并且存在子级，那么不可编辑
  if (['width'].includes(column.field) && TableUtils.isExistChildren(row)) return emptyText;
  else return [<el-input-number size='default' v-model={row[column.field]} />];
}
/**
 * 校验字段是否符合数字类型
 *
 * @param {String} field 字段
 * @param {String} kind 分类
 * @returns {Boolean} 是否
 */
const isNumberKindByField = (field, kind) => {
  return ['totaled', 'average'].includes(field) && !TableDataType.NUMBER.equals(kind) ? true : false
}
/**
 * 开关插槽
 * @param {Object} param 参数配置
 * @returns {String|Object} 字符串或输入框
 */
export const edit_switch = ({ row, column }) => {
  // 如果不是 visible ，并且存在子级，那么不可编辑
  if (['visible', 'sortable', 'totaled'].includes(column.field) && TableUtils.isExistChildren(row)) {
    return emptyText
  } else {
    // let disabled = isNumberKindByField(column.field, row.kind)
    return [
      <el-switch
        v-model={row[column.field]}
        inline-prompt
        active-text='是'
        inactive-text='否'
        size='default'
      />,
    ];
  }
};
/**
 * 字段下拉选项插槽
 *
 * @param {Object} param 参数配置
 * @param {Array} fieldOptions 字段数据可选项
 * @returns {String|Object} 字符串或输入框
 */
export const edit_select_field = ({ row, column }, fieldOptions) => {
  // 如果是 field ，并且存在子级，那么不可编辑
  if (['field'].includes(column.field) && TableUtils.isExistChildren(row)) return row[column.field];
  else {
    return [
      <vxe-select
        size='default'
        v-model={row[column.field]}
        transfer={true}
        clearable={false}
        placeholder='请选择'
        popup-class-name='designer-select-fixed'
      >
        {
          fieldOptions.map(item => {
            return [<vxe-option key={item.field} label={item.field} value={item.field} disabled={item.disabled} />];
          })
        }
      </vxe-select>,
    ];
  }
}
/**
 * 固定配置插槽
 *
 * @param {Object} param 参数配置
 * @returns {String|Object} 字符串或输入框
 */
export const edit_select_fixed = ({ row, column }) => {
  // 如果不是一级节点，不可编辑
  if (!row.level || row.level !== 1) {
    return emptyText;
  } else {
    return [
      <vxe-select
        size='default'
        v-model={row[column.field]}
        transfer={true}
        clearable={true}
        placeholder='请选择'
        popup-class-name='designer-select-fixed'
      >
        {TableColTypes.getFixedTypes().map(item => {
          return [<vxe-option key={item.value} label={item.label} value={item.value} />];
        })}
      </vxe-select>,
    ];
  }
};
/**
 * 内容排列方式配置插槽
 *
 * @param {Object} param 参数配置
 * @returns {String|Object} 字符串或输入框
 */
export const edit_select_align = ({ row, column }) => {
  if (TableUtils.isExistChildren(row)) return emptyText;
  else {
    return [
      <vxe-select
        size='default'
        v-model={row[column.field]}
        transfer={true}
        clearable={false}
        placeholder='请选择'
        popup-class-name='designer-select-fixed'
      >
        {TableColTypes.getAlignTypes().map(item => {
          return [<vxe-option key={item.value} label={item.label} value={item.value} />];
        })}
      </vxe-select>,
    ];
  }
}
/**
 * 字段分类选择插槽
 *
 * @param {Object} param 参数配置
 * @returns {String|Object} 字符串或输入框
 */
export const edit_select_kind = ({ row, column }, type='field') => {
  if (TableUtils.isExistChildren(row)) return emptyText;
  else {
    let KINDS = TableDataTypes.getData(type)
    return [
      <vxe-select
        size='default'
        v-model={row[column.field]}
        transfer={true}
        clearable={false}
        placeholder='请选择'
        popup-class-name='designer-select-fixed'
        onChange={(params) => {
          // 重置格式化规则
          row.format = ''
          // 切换分类，如果不是数字类型，重置合计行配置
          if (!TableDataType.NUMBER.equals(row[column.field])) {
            row.totaled = false
          }
        }}
      >
        {Object.values(KINDS).map(item => {
          return [<vxe-option key={item.value} label={item.label} value={item.value} />];
        })}
      </vxe-select>,
    ];
  }
}
/**
 * 字段格式化配置插槽
 *
 * @param {Object} param 参数配置
 * @returns {String|Object} 字符串或输入框
 */
export const edit_select_format = ({ row, column }) => {
  if (TableUtils.isExistChildren(row)) return emptyText;
  else {
    return [
      <vxe-select
        size='default'
        v-model={row[column.field]}
        transfer={true}
        clearable={true}
        placeholder='请选择'
        popup-class-name='designer-select-fixed'
      >
        {
          TableDataTypes.getData('field').map(dataType => {
            return [
              <vxe-optgroup label={dataType.label}>
                {dataType.options.map(item => {
                  return [<vxe-option key={item.value} label={item.label} value={item.value} />];
                })}
              </vxe-optgroup>
            ]
          })
        }
      </vxe-select>,
    ]
  }
}


export const header_tooltip_icon = ({ row, column }, text) => {
  return [
    <span>{column.title}</span>,
    <el-tooltip
      effect='light'
      content={text}
      teleported={true}
      placement='top'
      append-to='.vxe-grid.field-table'
    >
      <VfIcon name="iv-icon-info" />
    </el-tooltip>
  ]
}


// ----- formatter

// 空内容时的格式化
export const empty_formatter = ({ cellValue, row, column }, customText) => {
  return cellValue || customText || emptyText
};
// 是否数据的格式化
export const switch_formatter = ({ cellValue, row, column }) => {
  if (!['visible'].includes(column.field) && TableUtils.isExistChildren(row)) return emptyText;
  else return cellValue ? '是' : '否';
};
// 字段的格式化
export const field_kinds_formatter = ({ cellValue, row, column }) => {
  return cellValue ? TableDataType[cellValue.toUpperCase()].label : emptyText;
}
// 存在子级时的格式
export const has_children_formatter = ({ cellValue, row, column }) => {
  if (TableUtils.isExistChildren(row)) {
    return emptyText;
  } else {
    return cellValue;
  }
}
